<template>
  <!-- 作业项目-项目信息 -->
  <view
    class="grid-body"
    :class="{ 'body-height-4': status === 4, 'body-height': status !== 4 }"
    style="overflow: auto"
  >
    <view class="check grid-common list-cell">
      <view class="flex text"
        >项目名称：<text>{{ data.projectName }}</text></view
      >
      <view class="flex text"
        >项目编号：<text>{{ data.projectCode }}</text></view
      >
      <view class="flex text"
        >项目日期：<text>{{ data.projectDate }}</text></view
      >
      <view class="flex text"
        >项目类型：<text>{{ data.projectTypeLabel }}</text></view
      >
      <view class="flex text"
        >项目负责部门：<text>{{ data.deptName }}</text></view
      >
      <view class="flex text"
        >项目负责岗位：<text>{{ data.postName }}</text></view
      >
      <view class="flex text"
        >项目负责人：<text>{{ data.directorName }}</text></view
      >
      <view class="flex text"
        >监护人：<text>{{ data.guardianName }}</text></view
      >
      <view class="flex text"
        >项目描述：<text>{{ data.description }}</text></view
      >
      <view class="flex text"
        >现场研判人员：<text>{{ data.judgmentUserIdNames }}</text></view
      >
      <view class="text">
        <view class="img-label">现场研判照片：</view>
        <view class="img-view">
          <image-upload state="view" :imageUrl="data.judgmentPhotos" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ImageUpload from '@/components/image-upload/index.vue'

export default {
  name: 'projectInfo',
  components: {
    ImageUpload
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    status: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      textColor: true
    }
  },

  methods: {
    styleSelector(option) {
      return 'level_' + option
    },
    goOperationDetail(item) {
      uni.navigateTo({
        url: '/pages/work/controlCheck/index?riskIdentificationId=' + item.riskIdentificationId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-body {
  margin: 10px;

  &:last-child {
    margin-bottom: 24rpx;
  }
}

.body-height {
  max-height: calc(100vh - 215px);
}

.body-height-4 {
  max-height: calc(100vh - 265px);
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
.img-label,
.img-view {
  display: block;
  width: 100%;
}
</style>
